<template>
  <div class="msg-chart">
    <div id="charts"></div>
  </div>
</template>
<script>
export default {
  name: "chart",
  data() {
    return {
      show: 1,
      checkTime: 1, //时间参数
      url: "",
      interval: 10, //横轴间隔数量
      yName: "数量", //纵轴名称
      colorList: [], //图表颜色数组
      name: [], //指标数组
      xAxisData: [], // x轴数据，可根据需求
      ySeries: [], //y轴数据
    };
  },
  created() {},
  mounted() {
    this.loadLine();
  },
  methods: {
    loadLine() {
      var that = this;
      this.echarts = this.$echarts.init(document.getElementById("charts"));
      let option = {
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          // },
        },
        color: [
          "#CD5C5C",
          "#ff6600",
          "#808bc6",
          "#228B22",
          "#FF69B4",
          "#00CED1",
        ],
        legend: {
          data: [
            "新增艺店总数",
            "体验版",
            "",
            "外部推广",
            "用户裂变",
            "",
            "内部推广",
            "新增用户",
          ],
          orient: "vertical",
          top: 0,
          right: 0,
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12,
            // padding: [0, 0, 0, 5],
            // color: "rgba(255,255,255,0.87)",
            fontWeight: "bold",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              1,
              2,
              3,
              4,
              5,
              6,
              7,
              8,
              9,
              10,
              11,
              12,
              13,
              14,
              15,
              16,
              17,
              18,
              19,
              20,
            ],
            axisLabel: {
              interval: 1, //0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
              rotate: 20, //倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
            },
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            min: 0,
            axisLabel: {
              show: true,
              formatter: function (value) {
                var valueTxt = "";
                if (value > 999 && value < 10000) {
                  valueTxt = value / 1000 + "k";
                } else if (value >= 10000) {
                  valueTxt = value / 10000 + "w";
                } else {
                  valueTxt = value;
                }
                return valueTxt;
              },
            },
          },
          // {
          //   type: "value",
          //   name: "数量",
          //   min: 0,
          //   axisLabel: {
          //     show: true,
          //     formatter: function (value) {
          //       var valueTxt = "";
          //       if (value > 999 && value < 10000) {
          //         valueTxt = value / 1000 + "k";
          //       } else if (value >= 10000) {
          //         valueTxt = value / 10000 + "w";
          //       } else {
          //         valueTxt = value;
          //       }
          //       return valueTxt;
          //     },
          //   },
          // },
        ],
        series: [
          {
            name: "新增艺店总数",
            type: "bar",
            data: [
              200,
              499,
              70,
              242,
              256,
              757,
              1356,
              1622,
              326,
              200,
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
            ],
          },
          {
            name: "体验版",
            type: "bar",
            data: [
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
            ],
          },
          {
            name: "外部推广",
            type: "bar",
            data: [
              210,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
              200,
              499,
              70,
              232,
              2536,
              767,
              1356,
              1622,
              3236,
              200,
            ],
          },
          {
            name: "用户裂变",
            type: "bar",
            data: [
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
            ],
          },
          {
            name: "内部推广",
            type: "bar",
            data: [
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
            ],
          },
          {
            name: "新增用户",
            type: "bar",
            data: [
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
              200,
              499,
              70,
              232,
              256,
              767,
              1356,
              1622,
              326,
              200,
            ],
          },

          // {
          //   name: "平均温度2",
          //   type: "line",
          //   yAxisIndex: 1,
          //   data: [20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 1200, 620],
          // },
        ],
      };
      this.echarts.setOption(option);
    },
  },
};
</script>
<style lang="less">
.msg-chart {
  position: relative;
  width: 100%;
  .time {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 1);
    padding: 0 26px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 2px #f2f2f2;
    z-index: 10;
    .back {
      background: rgba(76, 76, 76);
      color: white;
      font-size: 28px;
      padding: 5px 10px;
      border-radius: 10px;
    }
    .item {
      width: 165px;
      height: 46px;
      background: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 46px;
      font-size: 28px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: rgba(155, 155, 155, 1);
    }
    .item_ {
      background: rgba(252, 234, 234, 1) !important;
      color: #dd0842;
    }
    .line {
      width: 2px;
      height: 28px;
      background: #f2f2f2;
    }
  }
  #charts {
    width: 100%;
    height: 800px;
    position: absolute;
    top: 200px;
    left: 0;
  }
}
</style>
